<template>
  <div class="app-container realData">
    <search-form
      ref="header"
      :search-data="ruleForm"
      :search-form="searchData"
      :search-handle="searchHandle"
    ></search-form>

    <base-table
      :tableData="tableData"
      :tableColumn="tableTitle"
      :height="tableHeight"
      :isPage="false"
    >
    </base-table>
  </div>
</template>
<script>
import searchForm from "@/components/SearchForm/index.vue";
import baseTable from "@/components/Table/index.vue";
import { reactive, toRefs, onMounted } from "vue";
import { useStore } from "vuex";
import { getHeatStation } from "@/api/heatStation";
import { getSystemList } from "@/api/system";
import { getEnergyAnalysis } from "@/api/energy";
import heightMinxin from "@/utils/tableHeight.mixin";
import { parseTime } from "@/utils/index";
// import { ElMessage } from "element-plus";
export default {
  name: "energyData",
  mixins: [heightMinxin],
  components: { searchForm, baseTable },
  setup() {
    const store = useStore();
    const state = reactive({
      ruleForm: {
        heatSourceId: "",
        heatStationId: "",
        heatSystemId: "",
        beginDt: "",
        endDt: "",
        type: 4,
        node: 1,
        group: 1,
      },
      searchData: [
        {
          type: "Select",
          prop: "heatSourceId",
          placeholder: "选择热源",
          options: [],
          change: (row) => {
            getHeatStationList(row);
            getSystemData();
          },
        },

        {
          type: "Select",
          prop: "heatStationId",
          placeholder: "选择换热站",
          options: [],
          change: () => {
            getSystemData();
          },
        },
        {
          type: "Select",
          prop: "heatSystemId",
          placeholder: "选择系统",
          options: [],
          change: () => {},
        },
        {
          type: "Date",
          prop: "beginDt",
          width: 150,
          placeholder: "开始日期",
          change: () => {},
        },
        {
          type: "Date",
          prop: "endDt",
          width: 150,
          placeholder: "结束日期",
          change: () => {},
        },
        {
          type: "Select",
          prop: "type",
          placeholder: "选择类型",
          width: 100,
          options: [
            { label: "气", value: 1 },
            { label: "水", value: 2 },
            { label: "电", value: 3 },
            { label: "热", value: 4 },
          ],
          change: () => {},
        },

        {
          type: "Select",
          prop: "node",
          placeholder: "选择类型",
          width: 140,
          options: [
            { label: "同级", value: 1 },
            { label: "下级节点", value: 2 },
            { label: "仅下级节点", value: 3 },
          ],
          change: () => {},
        },
        {
          type: "Select",
          prop: "group",
          placeholder: "选择类型",
          width: 140,
          options: [
            { label: "日报统计", value: 1 },
            { label: "日报记录", value: 2 },
          ],
          change: () => {
            initTableTitle();
          },
        },
      ],
      searchHandle: [
        {
          label: "搜索",
          type: "primary",
          handle: () => {
            handleSearch();
          },
        },
      ],
      tableData: [],
      tableTitle: [
        { prop: "heatSourceName", label: "热源" },
        { prop: "heatStationName", label: "换热站" },
        { prop: "heatSystemName", label: "系统" },
        { prop: "name", label: "表名称", hidden: true },
        {
          prop: "dt",
          label: "日期",
          render(h) {
            return parseTime(h.dt, "{y}-{m}-{d}");
          },
        },
        {
          prop: "meterType",
          label: "类型",
          render(h) {
            if (h.meterType && h.meterType == 1) {
              return "气";
            } else if (h.meterType && h.meterType == 2) {
              return "水";
            } else if (h.meterType && h.meterType == 3) {
              return "电";
            } else {
              return "热";
            }
          },
        },
        { prop: "value", label: "日耗量" },
      ],
      // page: {
      //   pageNo: 1,
      //   pageSize: 10,
      //   total: 0,
      // },
    });

    onMounted(async () => {
      await getHeatSourceList(); //获取热源
      initTableTitle();
      handleSearch();
    });
    const initTableTitle = () => {
      if (state.ruleForm.group == 1) {
        state.tableTitle[3].hidden = true;
      } else {
        state.tableTitle[3].hidden = false;
      }
    };
    /**热源列表 */
    const getHeatSourceList = () => {
      const { sourceData } = store.getters;
      state.searchData[0].options = sourceData;
      state.ruleForm.heatSourceId = sourceData[0].value;
      if (state.ruleForm.heatSourceId) {
        getHeatStationList(state.ruleForm.heatSourceId);
        getSystemData();
      }
    };
    /**换热站列表 */
    const getHeatStationList = async (id) => {
      state.ruleForm.heatStationId = "";
      state.searchData[1].options = [];
      if (id == "" || id == undefined || id == null) {
        state.ruleForm.heatStationId = "";
        state.searchData[1].options = [];
        return;
      }

      const { data: res } = await getHeatStation({ heatSourceId: id });
      if (res.success) {
        const list = res.data.map((item) => {
          return { label: item.name, value: item.id };
        });
        state.searchData[1].options = list;
      }
    };

    const getSystemData = async () => {
      state.ruleForm.heatSystemId = "";
      state.searchData[2].options = [];
      const { heatSourceId, heatStationId } = state.ruleForm;

      const { data: res } = await getSystemList({
        heatSourceId,
        heatStationId,
      });
      if (res.success) {
        if (res.data) {
          const list = res.data.map((item) => {
            return { label: item.name, value: item.id };
          });
          state.searchData[2].options = list;
        }
      }
    };

    const handleSearch = () => {
      // const { pageNo, pageSize } = state.page;
      let params = Object.assign(state.ruleForm);
      getEnergyAnalysis(params).then((resp) => {
        if (resp.data.success) {
          const { res, total } = resp.data.data;
          state.tableData = res;
          // state.page.total = total;
        }
      });
    };

    const handleCurrentChange = (val) => {
      state.page.pageNo = val;
      handleSearch();
    };
    const handleSizeChange = (val) => {
      state.page.pageNo = 1;
      state.page.pageSize = val;
      handleSearch();
    };

    return {
      ...toRefs(state),
      handleSearch,
      handleCurrentChange,
      handleSizeChange,
      initTableTitle,
    };
  },
};
</script>
